<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form
          class="el_form"
          :model="LoginForm"
          :rules="rules"
          ref="loginForms"
        >
          <h1>Hello</h1>
          <h2>欢迎来到后台甄选管理系统</h2>
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              placeholder="Please input User"
              v-model="LoginForm.username"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="LoginForm.password"
              :prefix-icon="Lock"
              type="password"
              placeholder="Please input password"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              size="default"
              class="el_btn"
              @click="UserLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
//引入pinia仓库
import useUerInfo from "@/store/modules/user";
//引入路由
import { useRouter, useRoute } from "vue-router";
//引入element-plus组件
import { ElNotification } from "element-plus";
//引入获取时间函数
import { gettime } from "@/utils/gettime";
let userStore = useUerInfo();
//设置加载效果
let loading = ref(false);
//收集用户信息
let LoginForm = reactive({
  username: "admin",
  password: "atguigu123",
});
//获取路由对象
let $route: any = useRoute();
//获取表单的组件实例对象
let loginForms = ref();
//设置表单验证
//required 这个字段是否必填
//message 提示信息
//trigger 触发方式 change 或者 blur
//min 最小长度
//max 最大长度
let rules = {
  username: [
    { required: true, message: "用户名不能为空", trigger: "change" },
    { min: 5, max: 18, message: "用户名长度为6-18位", trigger: "change" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "change" },
    { min: 6, max: 18, message: "密码长度为6-10位", trigger: "change" },
  ],
};
let $router = useRouter();
//登录回调
const UserLogin = async () => {
  //表单验证
  //await 只接受promis成功的对象
  await loginForms.value.validate();

  try {
    //开始加载效果
    loading.value = true;
    //保证登录成功后跳转
    await userStore.Login(LoginForm);
    //登录成功跳转
    $router.push($route.query.redirect || "/");
    //浏览器刷新一次
    window.location.reload();
    //结束加载效果
    loading.value = false;
    //提示框
    ElNotification({
      type: "success",
      message: "欢迎回来",
      title: `Hi,${gettime()}`,
    });
  } catch (error) {
    ElNotification({
      type: "error",
      //断言
      message: (error as Error).message,
    });
    //结束加载效果
    loading.value = false;
  }
};
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url(../../assets/images/background.png) no-repeat;
  background-size: cover;
  .el_form {
    position: relative;
    padding: 40px;
    top: 30vh;
    width: 80%;
    background: url(../../assets//images/login_form.png) no-repeat;
    background-size: cover;
    h1 {
      color: white;
      font-size: 40px;
    }
    h2 {
      color: white;
      font-size: 20px;
      margin: 20px 0;
    }
    .el_btn {
      width: 100%;
    }
  }
}
</style>
